<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息修改</title>
    <script language="javascript" type="text/javascript" src="../vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="../elementUI/elementUI2.x.js"></script>
    <!--        <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .el-form{
            width: 500px;
            padding-top: 25px;
            margin: 0 auto;
        }
        /*头像上传*/
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 50%;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .avatar {
            width: 60px;
            height: 60px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app"> <!--/user/updateUserInfo-->
    <el-form enctype="multipart/form-data" action="" method="post" :model="ruleForm" status-icon
             :rules="rules" ref="ruleForm" label-width="100px">
        <el-row>
            <el-col :span="24"><h1>信息修改</h1></el-col>
        </el-row>
<!--        用户id-->
        <input type="hidden" name="user_id" v-model="ruleForm.id" value="">
        <!-- 分割线-->
        <el-divider></el-divider>

        <el-form-item label="头像" prop="userImg">
            <el-upload
                    class="avatar-uploader"
                    name="userImg"
                    action=""
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-change="imgFileChange">
                <img v-if="ruleForm.userImg" :src="ruleForm.userImg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="昵称" prop="uname">
            <el-input name="user_name" v-model="ruleForm.uname"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" required>
            <el-col :span="11">
                <el-form-item prop="date">
                    <el-date-picker
                            name="user_birthday"
                            v-model="ruleForm.date"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
            <input type="radio" ref="sex1" value="男" name="user_sex">男&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" ref="sex2" value="女" name="user_sex">女
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
            <el-input name="id_card" v-model="ruleForm.id_card"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号" prop="rand_card">
            <el-input name="rand_card" v-model="ruleForm.rand_card"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <!--用于跳转-->
<!--            <input type="submit" ref="regBtn" v-show="false">-->
        </el-form-item>
    </el-form>
</div>

<script>
    var validateIdCard = (rule, value, callback) => {
        var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (!regIdNo.test(value)) {
            callback(new Error('身份证信息有误！'));
        } else {
            callback();
        }
    }
    var vm = new Vue({
        el:'#app',
        data: {
            ruleForm: {
                id:'',
                userImg: '',
                uname: '',
                date: '',
                sex: '',
                id_card:'',
                rand_card:''
            },
            imgfile:null,
            rules: {
               uname: [
                    {required: true, message: '请输入昵称', trigger: 'blur'}
                ],
                date: [
                    {type: 'string', required: true, message: '请选择日期', trigger: 'change'}
                ],
                id_card: [
                    {required: true, validator: validateIdCard, trigger: 'blur'}
                ],
            },
        },
        mounted:function(){
            //加载信息
          axios.post('/user/getUserInfo').then((resp)=>{
              const user = resp.data.user;
              this.ruleForm.userImg = "../"+user.user_img;
              this.ruleForm.uname = user.user_name;
              this.ruleForm.date = user.user_birthday;
              this.ruleForm.id_card = user.id_card;
              this.ruleForm.id = user.user_id;
              this.ruleForm.rand_card = user.rand_card;
              console.log('user.user_sex:'+user.user_sex);
              if(user.user_sex=='男'){
                  this.$refs.sex1.checked=true
              }else {
                  this.$refs.sex2.checked=true
              }

          }).catch((err)=>{
              console.log(err)
          });
        },
        methods: {
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        console.log('error submit!!');
                        return false;
                    } else {
                        // this.$refs.regBtn.click();
                        // window.location.reload();
                        var formData = new FormData();
                        var userImg = new String(this.ruleForm.userImg).substring(3);
                        var sex = '';
                        if(this.$refs.sex1.checked){
                            sex = '男';
                        }else{
                            sex = '女';
                        }
                        console.log(this.ruleForm.uname);
                        console.log('sex:'+sex);
                        formData.append("user_id",this.ruleForm.id);
                        formData.append("user_name",this.ruleForm.uname);
                        formData.append("user_birthday",this.ruleForm.date);
                        formData.append("id_card",this.ruleForm.id_card);
                        formData.append("user_sex",sex);
                        formData.append("rand_card",this.ruleForm.rand_card);
                        if(this.imgfile!=null){
                            formData.append("userImg",this.imgfile);
                        }else {
                            formData.append("user_img",userImg);
                        }
                        //提交信息
                        axios.post('/user/updateUserInfo',formData).then((resp)=>{
                            console.log('resp:'+resp.data);
                            if(resp.data==true){
                                vm.$message({
                                    type:'success',
                                    message:'保存成功'
                                })
                                setTimeout(function(){
                                    parent.window.location.reload();
                                },1000)
                            }else {
                                vm.$message({
                                    type:'error',
                                    message:'修改失败'
                                })
                            }
                        }).catch((err)=>{
                            console.log(err)
                        });
                    }
                });
            },
            //头像上传
            imgFileChange(file) {
                this.ruleForm.userImg = URL.createObjectURL(file.raw);
                this.imgfile = file.raw;
            }
        }
    })
</script>
</body>
</html>
